<!--
 * @Author: sbotlp
 * @Email: sbotlp@sina.com
 * @Date: 2019-11-24 22:10:55
 * @LastEditTime: 2019-11-24 22:24:29
 * @Description: http://www.sbotlp.com.cn
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue-2.5.13.js"></script>
</head>
<body>
  render函数和vdom
  <script>
    // 代码 演示,并非能运行
    const vm = new Vue();
    vm._update(vnode){
      const preVnode = vm.vnode; // 记录上一次的vnode，旧vnode
      vm._vnode = vnode;
      if (!preVnode) {
        vm.$el = vm.__path__(vm.$el,vnode); // 把vnode 生成到DOM容器中。  相当于snabbdom 的path 函数.
      }else {
        vm.$el = vm.__path__(preVnode,vnode);// path 新旧vnode对比，实现点对点渲染DOM。  相当于snabbdom 的path 函数.
      }
    }
    function updateComponent() {
      // vm._render 即 上面的render 函数返回vnode
      vm._update(vm._render());
    }
  </script>
  <script>
   // 定义H 函数, 关键函数2
   var h = snabbdom.h;
    // 获取容器 
    var container = document.getElementById('container');
    // 生成vnode, 虚拟DOM结构
    var vnode = h('ul#list', {}, [
      h('li.item',{},'item 1'),
      h('li.item',{},'item 2')
    ])
    // 第一次渲染，把vnode 生成到DOM容器中
    path(container,vnode);

    document.getElementById('btn-change').addEventListener('click', function(e){
      e.preventDefault();
      var newNode = h('ul#list', {}, [
        h('li.item',{},'item 1'),
        h('li.item',{},'item B'),
        h('li.item',{},'item 3')
      ]);
      // 新旧vnode 对比，找出不一致数据，更新 实现点对点DOM更新渲染
      path(vnode,newNode);
    });
  </script>
</body>
</html>